{% extends "dashboard/service_base.html" %}

{% load i18n a17t_tags %}

{% block head_title %}{{object.name}} {% trans 'Management' %}{% endblock %}

{% block service_actions %}
<a href="{% url 'dashboard:service' object.uuid %}" class="button field !low bg-neutral-000 w-auto">{% trans 'View' %} &rarr;</a>
{% endblock %}

{% block service_content %}
<div class="max-w-xl content">
    <h5>{% trans 'Installation'  %}</h5>
    <p>
        {% blocktrans trimmed %}
        Place the following snippet at the end of the <code>&lt;body&gt;</code> tag on any page you'd like to track.
        {% endblocktrans %}
    </p>
    {% include 'dashboard/includes/service_snippet.html' %}
    <hr class="sep h-4">
    <h5>{% trans 'Settings' %}</h5>
    <form class="card ~neutral !low p-0" method="POST">
        {% csrf_token %}
        <div class="p-4">
            {% include 'dashboard/includes/service_form.html' %}
        </div>
        <div class="section ~neutral !normal p-4 flex justify-between">
            <div>
                <button type="submit" class="button ~neutral !high">{% trans 'Save' %}</button>
                <a href="{% url 'dashboard:service' object.uuid %}" class="button ~neutral !low">{% trans 'Cancel' %}</a>
            </div>
            <div>
                <a href="{% url 'dashboard:service_delete' object.uuid %}" class="button ~critical !high">{% trans 'Delete' %}</a>
            </div>
        </div>
    </form>
    <hr class="sep h-4">
    <h5>API</h5>
    <div class="card ~neutral !low content">
        <p>Shynet provides a simple API that you can use to pull data programmatically. You can access this data via this URL:</p>
        <code class="text-sm">{{script_protocol}}{{request.get_host}}{% url 'api:services' %}?uuid={{object.uuid}}</code>
        <p>
        There are 2 optional query parameters:
        <ul>
            <li><code class="text-sm">startDate</code> &mdash; to set the start date (in format YYYY-MM-DD)</li>
            <li><code class="text-sm">endDate</code> &mdash; to set the end date (in format YYYY-MM-DD)</li>
        </ul>
        </p>
        <p>Example using cURL:</p>
        <code class="text-sm">curl -H 'Authorization: Token (your API token, available on security page)' '{{script_protocol}}{{request.get_host}}{% url 'api:services' %}?uuid={{object.uuid}}&startDate=2021-01-01&endDate=2050-01-01'</code>
    </div>
</div>
{% endblock %}
